<template>
  <div>
    <transition
      name="custom-classes-transition"
      enter-active-class="w-animated w-fadeInUp"
      leave-active-class="w-animated w-fadeOutDown"
    >
      <tabbar
        v-show="$route.meta.tabBar"
        v-model="tabBarIndex"
        class="w-tabbar">
        <tabbar-item
          link="/">
          <home-icon
            width="26"
            height="26"
            :fill="iconColor(0)"
            slot="icon"/>
          <span slot="label">主页</span>
        </tabbar-item>
        <tabbar-item link="/me">
          <resume-icon
            width="26"
            height="26"
            :fill="iconColor(1)"
            slot="icon"/>
          <span slot="label">我</span>
        </tabbar-item>
        <tabbar-item link="/summarize">
          <section-item-icon
            width="22"
            height="22"
            :fill="iconColor(2)"
            slot="icon"/>
          <span slot="label">总结</span>
        </tabbar-item>
        <tabbar-item link="/tool">
          <tool-icon
            width="24"
            height="24"
            :fill="iconColor(3)"
            slot="icon"/>
          <span slot="label">工具</span>
        </tabbar-item>
        <tabbar-item link="/set">
          <set-icon
            width="26"
            height="26"
            :fill="iconColor(4)"
            slot="icon"/>
          <span slot="label">设置</span>
        </tabbar-item>
      </tabbar>
    </transition>
  </div>
</template>

<script>
  import { Tabbar, TabbarItem } from 'vux'
  import HomeIcon from '@/icons/home.svg'
  import ResumeIcon from '@/icons/resume.svg'
  import SectionItemIcon from '@/icons/section-item.svg'
  import ToolIcon from '@/icons/tool.svg'
  import SetIcon from '@/icons/set.svg'
  export default {
    name: 'TabBar',
    components: {
      Tabbar,
      TabbarItem,
      HomeIcon,
      ResumeIcon,
      SectionItemIcon,
      ToolIcon,
      SetIcon
    },
    data() {
      return {
        tabBarIndex: 0
      }
    },
    watch: {
      /**
       * 监听路由改变
       * @param route 路由对象
       */
      $route(route) {
        if (route.meta.tabBar) {
          this.tabBarIndex = route.meta.tabBarIndex
        }
      }
    },
    methods: {
      iconColor(index) {
         return this.tabBarIndex === index ? '#47c03b' : '#888'
      }
    }
  }
</script>

<style lang="scss" scoped>
  .w-tabbar {
    position: fixed;
    left: 0;

    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .icon {
        width: 20px;
        height: 20px;
        padding-top: 3px;
        padding-left: 2px;
      }
    }
  }

  .tabbaraction {
    color: rgb(204, 33, 121);
  }
</style>
